<script setup>
	import { ref } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import { wxPayAPI, getOrderListAPI, getPointsAPI } from "@/api/index.js"

	// 订单状态
	const statusText = ["未支付", "已支付", "已退款"]
	// 获取订单列表
	const orderList = ref([])
	const getOrderList = async () => {
		try {
			uni.showLoading({ mask: true })
			const { data } = await getOrderListAPI()
			orderList.value = data
		} finally {
			uni.hideLoading()
		}
	}

	// 获取用户积分
	const points = ref(0)
	const getPoints = async () => {
		const { data } = await getPointsAPI()
		points.value = data
	}
	// 支付
	const onPay = async (value) => {
		// 单位--分
		let total_amount = Number(value)
		if (typeof total_amount !== 'number' || Number.isNaN(total_amount)) {
			return uni.showToast({ icon: "none", title: "请输入数字" })
		}
		if (total_amount < 0.1) {
			return uni.showToast({ icon: "none", title: "充值金额不能低于0.1" })
		}
		try {
			const { data } = await wxPayAPI({ total_amount: total_amount * 100 })
			wx.requestPayment({
				provider: 'wxpay',
				timeStamp: data.timestamp,
				nonceStr: data.nonce_str,
				package: data.package,
				signType: data.signType,
				paySign: data.paySign,
				success(res) {
					uni.showToast({ icon: "success", title: "支付成功!" })
					onRefresh()
				},
				fail(err) {
					uni.showToast({ icon: "none", title: "支付失败" })
				}
			})
		} catch (e) {
			console.log("支付失败");
		}
	}
	//弹窗
	const inputDialog = ref(null)
	const openPopup = () => {
		inputDialog.value.open()
	}
	const closePopup = () => {
		inputDialog.value.close()
	}

	// 刷新
	const onRefresh = async () => {
		getOrderList()
		getPoints()
	}


	onLoad(() => {
		getOrderList()
		getPoints()
	})
</script>

<template>
	<!-- 积分 -->
	<view class="points-content">{{points}}积分</view>
	<!-- 按钮 -->
	<view class="btn-content">
		<button type="primary" @click="openPopup">充值</button>
		<button type="default" @click="onRefresh">刷新</button>
	</view>
	<!-- 订单 -->
	<view class="order-content">
		<view class="order-item" v-for="item in orderList" :key="item.id">
			<view class="item-head">
				<!-- 订单id -->
				<view class="order-id">编号:<text user-select>{{item.id}}</text></view>
				<!-- 付款状态 -->
				<view class="status">
					<text>{{statusText[item.status]}}</text>
				</view>
			</view>
			<!-- 底部 -->
			<view class="item-footer">
				<view class="time">{{item.created_time}}</view>
				<view class="price">
					实付<text class="payment">￥{{item.total_fee/100}}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 充值金额弹窗 -->
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="充值金额" value="0.1" placeholder="请输入金额"
			@confirm="onPay"></uni-popup-dialog>
	</uni-popup>

	<view class="safe-area-inset-bottom"></view>
</template>

<style lang="scss" scoped>
	.points-content {
		margin-top: 120rpx;
		text-align: center;
		color: #EC544F;
		font-size: 60rpx;
	}

	.btn-content {
		margin-top: 120rpx;

		button {
			width: 500rpx;
			margin-bottom: 40rpx;
		}
	}

	.order-content {
		margin-top: 120rpx;
		padding: 0 20rpx 20rpx;

		.order-item {
			background-color: #F7F7F7;
			padding: 40rpx 20rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.item-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;

				.order-id {
					display: flex;
					align-items: center;
				}

				.status {
					color: #576b95;
					display: flex;
					align-items: center;

					text {
						margin-left: 5rpx;
					}
				}
			}

			.item-footer {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #a5a5a5;

				.price {
					font-weight: bold;
					display: flex;

					.payment {
						font-size: 32rpx;
						color: #EC544F;
					}
				}

			}
		}
	}
</style>